<template>
	<div class="singleImageUpload2 upload-container">
		<el-upload
			:data="dataObj"
			:multiple="false"
			:show-file-list="false"
			:on-success="handleImageSuccess"
			class="image-uploader"
			drag
			action="https://httpbin.org/post"
		>
			<i class="el-icon-upload" />
			<div class="el-upload__text">
				Drag或
				<em>点击上传</em>
			</div>
		</el-upload>
		<div v-show="imageUrl.length > 0" class="image-preview">
			<div v-show="imageUrl.length > 1" class="image-preview-wrapper">
				<img :src="imageUrl" />
				<div class="image-preview-action">
					<i class="el-icon-delete" @click="rmImage" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getToken } from '@/api/qiniu';

	export default {
		name: 'SingleImageUpload2',
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tempUrl: '',
				dataObj: { token: '', key: '' }
			};
		},
		computed: {
			imageUrl() {
				return this.value;
			}
		},
		methods: {
			rmImage() {
				this.emitInput('');
			},
			emitInput(val) {
				this.$emit('input', val);
			},
			handleImageSuccess() {
				this.emitInput(this.tempUrl);
			},
			beforeUpload() {
				const _self = this;
				return new Promise((resolve, reject) => {
					getToken()
						.then(response => {
							const key = response.data.qiniu_key;
							const token = response.data.qiniu_token;
							_self._data.dataObj.token = token;
							_self._data.dataObj.key = key;
							this.tempUrl = response.data.qiniu_url;
							resolve(true);
						})
						.catch(() => {
							reject(false);
						});
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.upload-container {
		width: 100%;
		height: 100%;
		position: relative;
		.image-uploader {
			height: 100%;
		}
		.image-preview {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			border: 1px dashed #d9d9d9;
			.image-preview-wrapper {
				position: relative;
				width: 100%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.image-preview-action {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				cursor: default;
				text-align: center;
				color: #fff;
				opacity: 0;
				font-size: 20px;
				background-color: rgba(0, 0, 0, 0.5);
				transition: opacity 0.3s;
				cursor: pointer;
				text-align: center;
				line-height: 200px;
				.el-icon-delete {
					font-size: 36px;
				}
			}
			&:hover {
				.image-preview-action {
					opacity: 1;
				}
			}
		}
	}
</style>
